<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
	<head>
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		
		<style type="text/css">
			.validation_error {
				border: 1px solid red;
				color: red;
			}
			
		</style>
		
		<script type="text/javascript" src="js/jquery.min.js">
		</script>
		<script type="text/javascript">
			$(function(){
				$('h1').css('text-align', 'center');
				
				$('.template').hide();
				$('#filteringForm').data('element-count', 0);
				
				$('input.numberFilter').live('keypress', function(event) {
					if (event.which < 48 || event.which > 57) return false;
				});
				
				$('#addFilter').click(function(event) {
					var elementSuffix = $('#filteringForm').data('element-count');
					$('#filteringForm').data('element-count', elementSuffix + 1);
					
					$('.template.filterChooser').clone().children().insertBefore($('#addFilter')).wrapAll('<div class="filterPane"/>');
					$('.filterPane:last').attr('name-suffix', elementSuffix);
				});
				
				$('.filterChooser').live('change', function(event) {
					$(this).nextAll().remove();
					var value = $(this).val();
					if (value == 'category' || $(this).val() == 'title') {
						$('.template.stringMatch').children().clone().insertAfter($(this));
					} else if (value == 'release') {
						$('.template.numberMatch').children().clone().insertAfter($(this));
					} else if (value == 'viewed') {
						$('.template.booleanMatch').children().clone().insertAfter($(this));
					}
					
					var name_suffix = $(this).parent('div.filterPane').attr('name-suffix');
					$(this).nextAll('input').each(function() {
						$(this).attr('name', value + '_'  + name_suffix);
					});
				});
				
				$('.filterRemover').live('click', function(event) {
					$(this).parent('div').remove();
				});
				
				//validation part
				validate_input = function() {
					valid = true;
					$('div.filterPane').removeClass('validation_error');
					$('form input, select').each(function() {
							if ($(this).val() == '') {
								$(this).parent('div.filterPane').addClass('validation_error');
								valid = false;
							}
					});
					
					return valid;
				}
				
				//submit
				$('form').submit(validate_input);
			});
		</script>
	
	</head>
	<body>
	
	<div id="templates">
		<div class="template stringMatch">
			<select name="matchingType" class="stringFilter" >
				<option value="*">zawiera</option>
				<option value="^">zaczyna się od</option>
				<option value="$">kończy się na</option>
				<option value="=">jest dokładnie</option>
			</select>
			<input type="text" name="regexp">
		</div>
	
		<div class="template filterChooser">
			<button type="button" class="filterRemover" title="Usuń filtr">X</button>
			<select class="filterChooser" title="Wybierz rodzaj filtra">
				<option value="" selected="selected" data-filter-type=""></option>
				<option value="title" data-filter-type="stringMatch">Tytuł</option>
				<option value="category" data-filter-type="stringMatch">Kategoria</option>
				<option value="release" data-filter-type="numberMatch">Data wydania</option>
				<option value="viewed" data-filter-type="booleanMatch">Czy obejrzany</option>
			</select>
		</div>
		
		<div class="template booleanMatch">
			<input type="radio" name="booleanFilter" value="true" checked="checked" class="booleanFilter" />
			<span>Tak</span>
			<input type="radio" name="booleanFilter" value="false" class="booleanFilter" />
			<span>Nie</span>
		</div>
		
		<div class="template numberMatch">
			<input type="text" name="numberMatch" class="numberFilter" />
		</div>
	</div>
	
	<div id="pageContent">
		
		<h1>Film filtering</h1>
		
		<form id="filteringForm" method="post" >
			<fieldset id="filtersPane">
				<legend>Filtrowanie</legend>
		
				
				<div id="addFilter">
					<input type="button" value="Dodaj kolejny filtr">
				</div>
				
				<div id="filteringButtons">
					<input type="submit" value="Wyszukaj"/>
				</div>
			</fieldset>
			
			<div id="resultsPane">
			</div>
		</form>
	</div>

	</body>
</html>